<template>
	<div class="outshangpinmudi" ref='outshangpinmudi'>
		<h2 class="titleSelf">出口商品目的国TOP5(国家或地区)(包)</h2>
		<div class="contentSelf">
			<div ref="outshangpinmudiChart" class="outshangpinmudiChart"></div>
		</div>

	</div>

</template>

<script>
	export default {
		name: 'outshangpinmudi',
		components: {

		},
		data() {
			return {

			}
		},
		mounted() {
			var that = this;
			that.getEchartData()
			setInterval(function() {
				that.getEchartData()
			}, 30000)

		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getEchartData() {
				const outshangpinmudiChart = this.$refs.outshangpinmudiChart;
				if (outshangpinmudiChart) {
					const myChart = this.$echarts.init(outshangpinmudiChart)
					var that = this;
					that.$myHttp.post("getWorldCityInfo")
						.then(function(data0) {
							if (data0.status == "200") {
								// console.log(data0.data.world_export, "nxnxnxnx")
								var getDates = data0.data.world_export;
								// var colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff'];
								var colorList = ['#36ffcb', '#07f4ec', '#37e0ff', '#38cafe', '#378cff'];
								var getDate = []
								if(getDates&&getDates.length>0){
									if(getDates.length>=5){
										getDate = getDates.slice(0, 5);
									}else{
										getDate = getDates;
									}
										//存：
										localStorage.setItem('getchukoumudiguoDate',JSON.stringify(getDate));
										
								}else{
									//取：
									 getDate  = JSON.parse(localStorage.getItem('getchukoumudiguoDate'))||[];
								}
								var datas = [];
								getDate.forEach((item, index) => {
									datas.push({
										name: item.NAME,
										value: item.TOTAL
									})
								})
								

								var country = {};
								
								getDates.forEach((item, index) => {
									// console.log(item.NAME)
									// 越南
									// 瑞士
									// 印度
									// 中国香港
									// 土耳其
									// 印度尼西亚
									// 多米尼加共和国
									// 台澎金马关税区
									// 希腊
									// 洪都拉斯
									// 马来西亚
									// 菲律宾
									// 葡萄牙
									// 以色列
									// 瑞典
									// 阿曼
									// 芬兰
									// 斯洛伐克
									// 孟加拉国
									// 巴基斯坦
									// 奥地利
									// 捷克共和国
									// 爱尔兰
									// 柬埔寨
									// 摩洛哥
									// 挪威
									// 萨尔瓦多
									// 匈牙利
									// 斯里兰卡
									// 丹麦
									// 新加坡
									// 智利
									// 墨西哥

									if (item.NAME == "美国") {
										country['美国'] = "./static/img/cn-country/america.png"
									} else if (item.NAME == "日本") {
										country['日本'] = "./static/img/cn-country/japan.png"
									} else if (item.NAME == "澳大利亚") {
										country['澳大利亚'] = "./static/img/cn-country/australia.png"
									} else if (item.NAME == "韩国") {
										country['韩国'] = "./static/img/cn-country/southKorea.png"
									} else if (item.NAME == "中国") {
										country['中国'] = "./static/img/cn-country/china.png"
									} else if (item.NAME == "加拿大") {
										country['加拿大'] = "./static/img/cn-country/canada.png"
									} else if (item.NAME == "新西兰") {
										country['新西兰'] = "./static/img/cn-country/xinxilan.png"
									} else if (item.NAME == "法国") {
										country['法国'] = "./static/img/cn-country/faguo.png"
									} else if (item.NAME == "德国") {
										country['德国'] = "./static/img/cn-country/germany.png"
									} else if (item.NAME == "英国") {
										country['英国'] = "./static/img/cn-country/england.png"
									} else if (item.NAME == "泰国") {
										country['泰国'] = "./static/img/cn-country/taiguo.png"
									} else if (item.NAME == "西班牙") {
										country['西班牙'] = "./static/img/cn-country/xibanya.png"
									} else if (item.NAME == "波兰") {
										country['波兰'] = "./static/img/cn-country/bolan.png"
									} else if (item.NAME == "意大利") {
										country['意大利'] = "./static/img/cn-country/yidali.png"
									} else if (item.NAME == "俄罗斯联邦") {
										country['俄罗斯联邦'] = "./static/img/cn-country/russia.png"
									} else if (item.NAME == "荷兰") {
										country['荷兰'] = "./static/img/cn-country/helan.png"
									} else if (item.NAME == "卢森堡") {
										country['卢森堡'] = "./static/img/cn-country/lusenbao.png"
									} else if (item.NAME == "比利时") {
										country['比利时'] = "./static/img/cn-country/bilishi.png"
									} else if (item.NAME == "南非") {
										country['南非'] = "./static/img/cn-country/nanfei.png"
									} else if (item.NAME == "巴西") {
										country['巴西'] = "./static/img/cn-country/baxi.png"
									} else if (item.NAME == "巴拿马") {
										country['巴拿马'] = "./static/img/cn-country/banama.png"
									} else if (item.NAME == "秘鲁") {
										country['秘鲁'] = "./static/img/cn-country/bilu.png"
									} else {
										country['其他'] = "./static/img/cn-country/qita.png"
									}
								})
								console.log(datas,'出口商品目的国TOP5(国家或地区)(包)')
								
								// var imgList = [country[datas[0].name] ? country[datas[0].name] : country["其他"],
								// 	country[datas[1].name] ? country[datas[1].name] : country["其他"], country[datas[
								// 		2].name] ? country[datas[2].name] : country["其他"], country[datas[3].name] ?
								// 	country[datas[3].name] : country["其他"], country[datas[4].name] ? country[datas[
								// 		4].name] : country["其他"]
								// ];



								// var imgList = ['./static/img/cn-country/america.png', './static/img/cn-country/bilishi.png', './static/img/cn-country/germany.png', './static/img/cn-country/bolan.png', './static/img/cn-country/helan.png'];


								var arrSelf = [];
								var arrSelfNew = [];
								var imgList = [];
								datas.forEach((item, index) => {
									arrSelf.push(item.value)
									var imgItem = country[item.name]?country[item.name]:country["其他"]
									imgList.push(imgItem)
								})
								
								console.log(imgList,'图片')
								var maxValue = Math.max(...arrSelf)
								let maxArr = (new Array(datas.length)).fill(maxValue * 2);
								
								const option = {
									tooltip: {
										trigger: 'axis',
										axisPointer: {
											type: 'shadow'
										}
									},
									legend: {
										show: false
									},
									grid: {
										left: '40%',
										top: '0%',
										bottom: '0',
										right: '8%'
									},
									xAxis: {
										show: false,
										inverse: true,
										type: 'value'

									},
									yAxis: [{
											type: 'category',
											inverse: true,
											axisLine: {
												show: false
											},
											axisTick: {
												show: false
											},
											axisPointer: {
												label: {
													show: true,
													margin: that.commonFunction.fontSize(0.2)
												}
											},
											data: datas.map(item => item.name),
											axisLabel: {
												margin: that.commonFunction.fontSize(1.8),
												fontSize: that.commonFunction.fontSize(0.16),
												align: 'left',
												color: '#00ffff',
												rich: {
													a1: {
														color: '#fff',
														backgroundColor: colorList[0],
														width: that.commonFunction.fontSize(0.2),
														height: that.commonFunction.fontSize(0.2),
														align: 'center',
														borderRadius: 2,
														fontSize: that.commonFunction.fontSize(0.16),
													},
													a2: {
														color: '#fff',
														backgroundColor: colorList[1],
														width: that.commonFunction.fontSize(0.2),
														height: that.commonFunction.fontSize(0.2),
														align: 'center',
														borderRadius: 2,
														fontSize: that.commonFunction.fontSize(0.16),
													},
													a3: {
														color: '#fff',
														backgroundColor: colorList[2],
														width: that.commonFunction.fontSize(0.2),
														height: that.commonFunction.fontSize(0.2),
														align: 'center',
														borderRadius: 2,
														fontSize: that.commonFunction.fontSize(0.16),
													},
													b: {
														color: '#fff',
														backgroundColor: colorList[3],
														width: that.commonFunction.fontSize(0.2),
														height: that.commonFunction.fontSize(0.2),
														align: 'center',
														borderRadius: 2,
														fontSize: that.commonFunction.fontSize(0.16),
													},
													v: {
														margin: [0, 0, 0, that.commonFunction.fontSize(0.1)],
														fontSize: that.commonFunction.fontSize(0.14),
													},
													c1: {
														// padding: [0, that.commonFunction.fontSize(0.05), 0, 0],
														width: that.commonFunction.fontSize(0.18),
														height: that.commonFunction.fontSize(0.16),
														backgroundColor: {
															image: imgList[0]
														},
													},
													c2: {
														// padding: [0, that.commonFunction.fontSize(0.05), 0, 0],
														width: that.commonFunction.fontSize(0.18),
														height: that.commonFunction.fontSize(0.16),
														backgroundColor: {
															image: imgList[1]
														},
													},
													c3: {
														// padding: [0, that.commonFunction.fontSize(0.05), 0, 0],
														width: that.commonFunction.fontSize(0.18),
														height: that.commonFunction.fontSize(0.16),
														backgroundColor: {
															image: imgList[2]
														},
													},
													c4: {
														// padding: [0, that.commonFunction.fontSize(0.05), 0, 0 ],
														width: that.commonFunction.fontSize(0.18),
														height: that.commonFunction.fontSize(0.16),
														backgroundColor: {
															image: imgList[3]
														},
													},
													c5: {
														// padding: [0, that.commonFunction.fontSize(0.05), 0, 0 ],
														width: that.commonFunction.fontSize(0.18),
														height: that.commonFunction.fontSize(0.16),
														backgroundColor: {
															image: imgList[4]
														},
													}
												},

												formatter: function(params) {
													var index = datas.map(item => item.name).indexOf(
														params);
													index = index + 1;
													if (index - 1 < 3) {
														return [
															// '{a' + index + '|' + index + '}' + 
															'  {c' + index + '|}  ' + '{v|' + params + '}'
														].join('\n')
													} else {
														return [
															// '{b|' + index + '}' + 
															'  {c' + index + '|}  ' + '{v|' + params + '}'
														].join('\n')
													}
												}
											}
										}],
									series: [{
											name: 'value',
											type: 'bar',
											barWidth: that.commonFunction.fontSize(0.16),
											// zlevel: 1,//会影响分隔
											data: datas.map((item, i) => {
												var itemStyle = {
													// color: i > 3 ? colorList[3] : colorList[i]
													color: {
														type: 'linear',
														x: 0,
														y: 0,
														x2: 1,
														y2: 0,
														colorStops: [{
															offset: 0,
															color: '#fff' // 0% 处的颜色
														}, {
															offset: 1,
															color: '#e6c12a' // 100% 处的颜色
														}]
													}
												}

												return {
													value: item.value,
													itemStyle: itemStyle
												};
											}),
											label: {
												show: true,
												position: 'left',
												color: '#e6c12a',
												fontSize: that.commonFunction.fontSize(0.14),
												// offset: [-that.commonFunction.fontSize(0.6), 0],
												formatter: function(params) {

													return that.commonFunction.formatNumberRgx((params
														.value).toFixed(0));
												}

											}
										},

										{
											z: 1,
											name: '背景',
											type: 'bar',
											barWidth: that.commonFunction.fontSize(0.16),
											barGap: '-100%',
											itemStyle: {
												normal: {
													color: 'rgba(118, 111, 111, 0.55)',
													// borderWith:1,
													// borderColor:'red',
												}
											},
											data: maxArr,
										}, { //分隔
											z: 20,
											type: 'pictorialBar',
											itemStyle: {
												color: '#070335'
											},
											symbolRepeat: 'fixed',
											symbolMargin: 2,
											symbol: 'roundRect',
											symbolClip: true,
											symbolSize: [2, that.commonFunction.fontSize(0.18)],
											symbolPosition: 'start',
											symbolOffset: [0, 0],
											data: datas,

											animationEasing: 'elasticOut'
										}

									]
								};

								myChart.setOption(option)
								window.addEventListener("resize", function() {
									myChart.resize()
								})
							} else {
								alert("数据请求错误")
							}

						})
						.catch(function(error) {
							alert(error)
						})

				}
			}
		}
	}
</script>

<style scoped>
	.outshangpinmudi {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.titleSelf {
		width: 90%;
	}

	.outshangpinmudiChart {
		width: 100%;
		height: 100%;
	}
</style>
